
<template>
<div class="songOut"  v-if="songList[0].name" >
        <div class="songOut-main" v-for="(item,i) in songList" :key="i">
        <div class=" playlist" >
        <img :src="item.coverImgUrl" alt="" @click="skipRouter(item)">
        <p>{{item.name}}</p>
        </div>
  </div>
</div>
</template>

<script>
export default {
   name:"songList",
   props:{
     songList:{
       type:Array,
       default:[]
     }
   },
   methods:{
      skipRouter(item){
         this.$router.push(`/MusicDetails?id=${item.id}`)
       }
   }
}
</script>

<style lang="less" scoped>

       .songOut{
      width:100%;
      display:flex;
      flex-wrap: wrap;
  .songOut-main{
  width: 20%;
  height:250px;
   .playlist{
     width:90%;
     height:240px;
      margin:0 auto;
     p{
        font-size:13px;
        color:#aaa;
     }
     
     img{
       width:100%;
       height:210px;
       border-radius:10px;
     }
   }
  }
  }
</style>